<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.m013}}
				</view>
				<!-- <view @click="$tool.navTo('/pages/mine/commissionRecord')" class="flex-1 text-alignR A-Medium record"
					:class="model=='light'?'recordLight':''">
					<view class="pr-3">
						{{i18n.m014}}
					</view>
				</view> -->
				<view class="flex-1 f0 pr-3 flex justify-end">
					<image @click="$tool.navTo('/pages/mine/commissionRecord')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="h24">

		</view>
		<!-- 经纪人佣金 -->
		<view class="flex align-center justify-center mb-3">
			<view class="f0">
				<image style="width: 195rpx;" src="/static/images/member/2.png" mode="widthFix"></image>
			</view>
			<view class="topTitle A-Medium" :class="model=='light'?'topTitleLight':''">
				{{i18n.m015}}
			</view>
			<view class="f0">
				<image style="width: 195rpx;" src="/static/images/member/3.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="recordWrap px-3 mx-3" :class="model=='light'?'recordWrapLight':''">
			<view class="flex py-3 text-alignC align-center list">
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.spotTradeAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n087}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top2 D-Bold">
						${{obj.spotCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n088}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.totalSpotCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n089}}
					</view>
				</view>
			</view>
			<view class="flex py-3 text-alignC align-center list">
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.arbitrageTradeAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n090}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top2 D-Bold">
						${{obj.arbitrageCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n088}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.totalArbitrageCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n089}}
					</view>
				</view>
			</view>
			<view class="flex py-3 text-alignC align-center list" style="border: none;">
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.optionsTradeAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n091}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top2 D-Bold">
						${{obj.optionsCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n088}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="top D-Bold">
						${{obj.totalOptionsCommissionAmount}}
					</view>
					<view class="bottom A-Medium">
						{{i18n10.n089}}
					</view>
				</view>
			</view>
		</view>
		<view class="tabbar A-Medium flex align-center mx-3" :class="model=='light'?'tabbarLight':''">
			<view class="mr-3" @click="changeCurrent(0)" :class="current==0?'item1':'item'">
				{{i18n.m025}}
			</view>
			<view class="mr-3" @click="changeCurrent(1)" :class="current==1?'item1':'item'">
				{{i18n.m026}}
			</view>
			<view class="mr-3" @click="changeCurrent(2)" :class="current==2?'item1':'item'">
				{{i18n.m027}}
			</view>
			<view class="mr-3" @click="changeCurrent(3)" :class="current==3?'item1':'item'">
				{{i18n.m028}}
			</view>
		</view>
		<view class="mx-3 A-Medium Wrap py-3 pl-3" :class="model=='light'?'WrapLight':''">
			<view class="flex bottom align-center" style="margin-bottom: 16rpx;">
				<view style="width: 126rpx;">
					{{i18n.m029}}
				</view>
				<!-- <view style="width: 172rpx;">
					{{i18n.m030}}
				</view> -->
				<view style="width: 189rpx;">
					{{i18n.m031}}
				</view>
				<view style="width: 189rpx;">
					{{i18n.m032}}
				</view>
				<view style="width: 189rpx;">
					{{i18n.m033}}
				</view>
			</view>
			<view v-for="(item,index) in list" class="flex bottom align-center"
				:style="index!=(list.length-1)?'margin-bottom: 16rpx;':''">
				<view style="width: 126rpx;">
					{{item.sourceUser}}
				</view>
				<!-- <view style="width: 172rpx;">
					{{item.sourceMobileNumber}}
				</view> -->
				<view style="width: 189rpx;">
					${{item.spotTradeAmount}}
				</view>
				<view style="width: 189rpx;">
					${{item.arbitrageTradeAmount}}
				</view>
				<view style="width: 189rpx;">
					${{item.optionsTradeAmount}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commissionTotal,
		commissionTradeFlow
	} from '@/core/api/user.js';
	export default {
		data() {
			return {
				obj:{
					arbitrageCommissionAmount:'0',//	今日套利佣金金额	
					arbitrageTradeAmount:'0',//	累计套利交易流水金额	
					optionsCommissionAmount:'0',//	今日期货佣金金额	
					optionsTradeAmount:'0',//	累计期货交易流水金额		
					spotCommissionAmount:'0',//	今日现货佣金金额
					spotTradeAmount:'0',//	累计现货交易流水金额
					totalArbitrageCommissionAmount:'0',//	累计套利佣金金额
					totalOptionsCommissionAmount:'0',//	累计期货佣金金额
					totalSpotCommissionAmount:'0',//	累计现货佣金金额
				},
				lists:'',
				current:0,
				list:[],
			}
		},
		onLoad() {
			commissionTotal({
				mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
			}).then(res=>{
				console.log(res,'cs');
				if(res.result!==null){
					this.obj = res.result;
				}
			})
			commissionTradeFlow({
				mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
			}).then(res=>{
				this.lists = res.result;
				this.list = this.lists.allList;
			})
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
		},
		computed: {
			i18n() {
				return this.$t('mine2');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark'
			}
		},
		methods:{
			changeCurrent(e){
				this.current = e;
				if(e==0){
					this.list = this.lists.allList;
				}else{
					this.list = this.lists['level'+e+'List'];
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.h24 {
		height: 24rpx;
	}

	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.topTitle {
		font-size: 32rpx;
		color: #F7F7F7;
		margin: 0 24rpx;
	}

	.topTitleLight {
		color: #0E0F11;
	}

	.recordWrap {
		.list {
			border-bottom: 2rpx solid #1F2128;
		}

		.top {
			font-weight: bold;
			font-size: 36rpx;
			color: #AAACB8;
		}

		.top2 {
			font-weight: bold;
			font-size: 36rpx;
			color: #D22540;
		}

		.bottom {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #7F838D;
		}
	}

	.recordWrapLight {
		.list {
			border: none;
		}
		
		.top {
			color: #47474A;
		}
	}

	.tabbar {
		margin-top: 48rpx;
		margin-bottom: 24rpx;
		overflow-y: scroll;

		view {
			flex-shrink: 0;
		}

		.item {
			font-size: 24rpx;
			color: #7F838D;
		}

		.item1 {
			font-size: 24rpx;
			color: #F7F7F7;
		}
	}

	.tabbarLight {
		.item1 {
			color: #0E0F11;
		}
	}

	.Wrap {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		overflow-x: scroll;

		view {
			flex-shrink: 0;
		}

		.top1 {
			font-weight: bold;
			font-size: 36rpx;
			color: #F7F7F7;
		}

		.top2 {
			font-weight: bold;
			font-size: 36rpx;
			color: #D22540;
		}

		.bottom {
			font-size: 24rpx;
			color: #7F838D;
		}

		.bottom2 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}

	.WrapLight {
		background: #fff;
		border: none;

		.top1 {
			color: #0E0F11;
		}

		.bottom {
			font-size: 24rpx;
			color: #7F838D;
		}

		.bottom2 {
			font-size: 24rpx;
			color: #82DA4C;
		}
	}
</style>